<template>
  <div class="home-list">
    <div class="home-list-content">
      <div :class="`home-list-add ${computedHomeListItemClass}`">
        <div class="home-list-button" @click="handleCreate">
          <em>+</em>
          &nbsp;
          <span>创建自定义视图</span>
        </div>
      </div>
      <div
        :class="computedHomeListItemClass"
        v-for="(item, index) in dataList"
        :key="index"
      >
        <div class="home-list-title">
          <span>{{ item.viewName }}</span>
          <em :class="{ active: item.state === 1 }">
            {{ status[`state${item.state}`] }}
          </em>
        </div>
        <div class="home-list-img">
          <div v-if="!item.viewCoverAddress" class="home-list-url">
            <img
              :src="$imgUrl + '/lcd-icon-home-emtry.png'"
              :alt="$imgUrl + '/lcd-icon-home-emtry.png'"
            />
          </div>
          <img
            v-else
            class="home-list-url-path"
            :src="
              item.viewCoverAddress
                ? 'tgcos/' + item.viewCoverAddress
                : $imgUrl + '/lcd-icon-home-emtry.png'
            "
            :alt="
              item.viewCoverAddress
                ? 'tgcos/' + item.viewCoverAddress
                : $imgUrl + '/lcd-icon-home-emtry.png'
            "
          />
        </div>
        <div class="home-list-opearte">
          <div class="home-list-opearte-item">
            <div class="opearte-item" @click="handleMore(item)">
              <svg-icon type="home-more" />
              <span>详情</span>
            </div>
          </div>
          <div class="home-list-opearte-item" @click="handleEdit(item)">
            <div class="opearte-item">
              <svg-icon type="home-edit" />
              <span>编辑</span>
            </div>
          </div>
          <div class="home-list-opearte-item">
            <template v-if="item.state === 1">
              <div
                @click="handleMessage"
                class="opearte-item"
              >
                <svg-icon type="home-delete" />
                <span>删除</span>
              </div>
            </template>
            <template v-else>
              <a-popconfirm
                title="确定删除该视图信息吗？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="handleDelete(item.viewId)"
              >
                <template slot="icon">
                  <svg-icon type="home-confirm" />
                </template>
                <div class="opearte-item">
                  <svg-icon type="home-delete" />
                  <span>删除</span>
                </div>
              </a-popconfirm>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import window from '@/mixins/window'
import {message} from 'ant-design-vue';

export default {
  name: 'List',
  mixins: [window],
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      status: {
        state1: '已使用',
        'state-1': '未使用',
      },
    }
  },
  methods: {
    handleMessage() {
      message.config({
        prefixCls: 'ant-custom-error'
      })
      message.error({
        content: '该视图已被使用，无法删除！',
      })
    },
    handleCreate() {
      this.$emit('handleCreate')
    },
    handleMore(e) {
      this.$emit('handleMore', e)
    },
    handleDelete(e) {
      this.$emit('handleDelete', e)
    },
    handleEdit(e) {
      this.$router.push({
        path: `/editor/${e.viewId}`,
      })
    },
  },
  computed: {
    computedHomeListItemClass() {
      const clazz = ['home-list-item']
      if (this.windowWidth < 768) {
        clazz.push('home-list-item-1')
      } else if (this.windowWidth < 1200) {
        clazz.push('home-list-item-2')
      } else {
        clazz.push('home-list-item-4')
      }
      return clazz.join(' ')
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@/styles/vars.less';
@color-fff: lighten(@dark-color, 100% - lightness(@dark-color));
@color-777: lighten(@dark-color, 46.8% - lightness(@dark-color));
.home-list {
  margin-top: 16px;
  width: 100%;
  .home-list-content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    gap: 16px;
    .home-list-item-1 {
      width: 100%;
    }
    .home-list-item-2 {
      width: calc(50% - 8px);
    }
    .home-list-item-4 {
      width: calc(25% - 12px);
    }

    .home-list-item {
      &.home-list-add {
        transition: none;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px dashed lighten(@dark-color, 59.4% - lightness(@dark-color));
        font-size: 16px;
        .home-list-button {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 172px;
          height: 40px;
          background: @primary-color;
          border-radius: 4px;
          text-align: center;
          cursor: pointer;
          em {
            font-weight: bold;
          }
        }
      }
      &.home-list-add:hover {
        transform: scale(1);
        border-color: @primary-color;
      }
      transition: transform 0.3s;
      aspect-ratio: 456 / 330;
      background: lighten(@dark-color, 23.3% - lightness(@dark-color));
      border-radius: 4px;
      .home-list-title {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        font-size: @color-fff;
        padding: 0 16px;
        box-sizing: border-box;
        em {
          display: inline-block;
          margin-left: 12px;
          width: 52px;
          height: 22px;
          line-height: 20px;
          font-style: normal;
          color: @color-777;
          border: 1px solid @color-777;
          text-align: center;
          font-size: 12px;
          border-radius: 4px;
          background: rgba(@color-777, 0.1);
          &.active {
            color: @success-color;
            border: 1px solid @success-color;
            background: rgba(@success-color, 0.1);
          }
        }
      }
      .home-list-img {
        display: flex;
        justify-content: center;
        width: 100%;
        height: calc(100% - 96px);
        padding: 0 16px;
        box-sizing: border-box;
        .home-list-url,
        .home-list-url-path {
          margin-bottom: 16px;
          width: 100%;
          // aspect-ratio: 16 / 9;
          object-fit: fill;
        }
        .home-list-url {
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          background: lighten(@dark-color, 8.4% - lightness(@dark-color));
          img {
            width: 40%;
            background-size: contain;
          }
        }
      }
      .home-list-opearte {
        display: flex;
        align-items: center;
        width: 100%;
        height: 46px;
        box-shadow: 0px -1px 0 0 lighten(@dark-color, 33.2% -
              lightness(@dark-color));
        font-size: 14px;
        color: @color-fff;
        .home-list-opearte-item {
          flex: 1;
          text-align: center;
          line-height: 16px;
          border-right: 1px solid
            lighten(@dark-color, 33.2% - lightness(@dark-color));
          .opearte-item {
            width: 60px;
            margin: 0 auto;
            cursor: pointer;
            img {
              width: 16px;
              height: 16px;
              background-size: contain;
              transform: translateY(-2px);
            }
            i {
              pointer-events: none;
            }
            span {
              padding-left: 12px;
            }
            &.home-list-disabled {
              filter: brightness(0.7);
            }
          }

          .operate-item-message {
            background: @error-color;
            color: white;

            .action {
              color: white;
            }
          }
        }
      }
    }

    .home-list-item:hover {
      transform: scale(1.05);
      cursor: pointer;
    }
  }
}
</style>
<style lang="less">
@import '~@/styles/cover.less';
@import '~@/styles/vars.less';
.ant_popconfirm_reset();
.ant_message_reset(ant-custom-error, @error-color);
</style>
